// -------------------------------------------1.获取学生数据，并渲染到表格--------------------------------------------
async function renderStudent() {
    const {data: res} = await axios.get('/students')
    let arr = res.data.map (item => {
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0? '男' : '女'}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr>
        `
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent();

// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    document.querySelector('h5.modal-title').innerHTML = '添加学员'
    // 重置表单
    document.querySelector('#form').reset();
  addModal.show()
})

// 下面的函数，完成省市县的联动效果
const initCity = async () => {
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')
    
    // 4.1 -------- 先获取所有的省 -------------
    const { data: res1 } = await axios.get('/api/province')
    // console.log(res1) // { message: '获取成功', data: ['北京', '天津', '河北省', .....] }
    let arr1 = res1.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr1.join('')
    
    // 4.2 -------- 切换省的时候，获取市 -------------
    province.addEventListener('change', async function () {
      let pname = province.value // 获取当前选择的省的名字
      // 省切换后，无论如何，都要重置县
      area.innerHTML = '<option value="">--地区--</option>'
      // 如果没有选择省，则需要重置市
      if (pname === '') return (city.innerHTML = '<option value="">--城市--</option>')
      // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
      // console.log(pname)
      const { data: res2 } = await axios.get('/api/city', { params: { pname } })
      // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
      let arr2 = res2.data.map(item => `<option value="${item}">${item}</option>`)
      city.innerHTML = '<option value="">--城市--</option>' + arr2.join('')
    })
    
    // 4.3 -------- 切换市的时候，获取县 -------------
    city.addEventListener('change', async function () {
      let pname = province.value // 获取当前选择的省的名字
      let cname = city.value // 获取市的名字
      // 没有选择市，要重置县
      if (cname === '') return (area.innerHTML = '<option value="">--地区--</option>')
      // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
      // console.log(pname)
      const { data: res3 } = await axios.get('/api/area', { params: { pname, cname } })
      // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
      let arr3 = res3.data.map(item => `<option value="${item}">${item}</option>`)
      area.innerHTML = '<option value="">--地区--</option>' + arr3.join('')
    })
  }
  initCity()

//   --------------点击弹层中的 确认 按钮的时候添加数据------------------------
document.querySelector('#submit').addEventListener('click', async function(e) {
    e.preventDefault();
    let data = val(document.querySelector('#form'));
    data.age =Number(data.age);
    data.gender = +data.gender //+必须和后面的变量连在一起
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    try{
        const{data:res} = await axios.post('/students',data);
        message.success(res.message);
        addModal.hide();
        renderStudent();
    }catch(e) {
        message.error('添加失败')
    }
})

// ----------------------------------删除操作 | 编辑操作------------------------------
document.querySelector('tbody').addEventListener('click',async function(e) {
    // 判断，点击的是否是删除
    if(e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // 目前阶段，我们应该有这样的思想：对于敏感操作，必须加提示
        // 至于用什么提示（原生的confirm，插件）
        if (!confirm('确认是否删除')) {return};
        try{
            const{data:res} = await axios.delete(`/students/${id}`);
            message.success('删除成功');
            renderStudent();
        }catch(e) {
            message.error('删除失败')
        }
    }
    // 判断，点击的是否是编辑
    if(e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // console.log('你点击的是编辑按钮', id);
        // 修改标题
        document.querySelector('h5.modal-title').innerHTML = '修改学员'
        // 设置自定义属性，存储id
        document.querySelector('h5.modal-title').setAttribute('data-id',id)
        // 显示模态框
        addModal.show();
        // 在数据回填的之前 --> 首先得有数据 --> 根据id发送请求获取数据
        const{data: res} = await axios.get(`/students/${id}`);
        // 在数据回填之前，应该把市，县都取出，渲染到第2，3个下拉框中
        let p1 = axios.get('/api/city',{params: {pname:res.data.province}});
        let p2 = axios.get('/api/area',{params: {pname:res.data.province , cname:res.data.city}});
        const result = await Promise.all([p1,p2]);
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`);
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>`+ arr2.join('');
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        // val(表单，数据) 传递两个参数，表示进行数据回填
        val(document.querySelector('#form'),res.data)
    }
})
